<template>
  <div>
    <div class="my-pannel">
      <h4>事件数据</h4>
      <div class="flex">
<!--        <leftImgInfo class="base-margin" v-for="item in ctx.eventdata" :fa="item.fa" :title="item.title" :info="item.info" :type="item.type"></leftImgInfo>-->
        <eventInfo v-for="item in ctx.eventdata"
                   :title="item.title"
                   :info="item.info"
                   :type="item.type"></eventInfo>
      </div>
    </div>

    <div class="my-pannel">
      <h4>事件趋势</h4>
      <div class="flex">
        <lineBar class="base-margin" :x="ctx.event_30day_trend.x" :y="ctx.event_30day_trend.y" title="最近30天趋势"></lineBar>
        <lineBar class="base-margin" :x="ctx.month_12_trend.x" :y="ctx.month_12_trend.y" title="最近12月趋势"></lineBar>
      </div>
    </div>

    <div class="my-pannel">
      <h4>事件分布</h4>
      <div>
        <pie class="base-margin" :data="ctx.fail_source" :option="pieOption"  title="质量事件不合格来源"></pie>
        <pie class="base-margin" :data="ctx.fail_kind" :option="pieOption" title="质量事件不合格类别"></pie>
      </div>
    </div>
  </div>
</template>
<script>
// import leftImgInfo from  'webcase/director/statistic/leftImgInfo.vue'
import  lineBar from 'webcase/chart/lineBar.vue'
import pie from 'webcase/chart/pie.vue'
import eventInfo from './components/eventInfo.vue'
export  default  {
  props:['ctx'],
  components:{
    // leftImgInfo,
    lineBar,
    pie,
    eventInfo
  },
  data(){
    return {
      pieOption:{
        label:{
          formatter: '{b}:{@value}',
        },
      }
    }
  }
}
</script>
<style scoped lang="scss">
.my-pannel{
  border: 5px;
  background-color: white;
  margin: 10px;
  padding: 10px 20px;
}
.base-margin{
  margin: 10px;

}
</style>
